{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
    <div class="page__bd" style="height: 100%">
        <div class="weui-tab">
            <div class="weui-tab__panel">

				<div class="weui-panel weui-page-home_head" style="margin-bottom: 0">
					<div class="weui-panel__bd">
						<div class="weui-flex weui-nav--order">
							<a class="weui-flex__item" href="{:url('Index/order')}?id=0">
								<div class="weui-grid__icon">
									<i class="fa fa-list"></i>
								</div>
								<p class="weui-grid__label">全部订单</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=1">
								<div class="weui-grid__icon">
									<i class="fa fa-truck"></i>
								</div>
								<p class="weui-grid__label">待发货</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=3">
								<div class="weui-grid__icon">
									<i class="fa fa-fighter-jet"></i>
								</div>
								<p class="weui-grid__label">已发货</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=0">
								<div class="weui-grid__icon">
									<i class="fa fa-cogs"></i>
								</div>
								<p class="weui-grid__label">申换/售后</p>
							</a>
						</div>
					</div>
				</div>
				
				<div class="weui-panel">
					<div class="weui-panel__bd">
						<div class="weui-grids">
							<a href="javascript:show(1);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-pie-chart"></i>
								</div>
								<p class="weui-grid__label">限时基础品</p>
							</a>
							<a href="javascript:show(2);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-line-chart"></i>
								</div>
								<p class="weui-grid__label">限时高端品</p>
							</a>
							<a href="javascript:;show(3);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-dollar"></i>
								</div>
								<p class="weui-grid__label">季节常在品</p>
							</a>
						</div>
					</div>
				</div>
				<div id="listData" style="margin-top: 10px;"></div>

            </div>
            <div class="weui-tabbar">
                <a href="{:url('Index/home')}" class="weui-tabbar__item">
                    <div class="weui-tabbar__icon">
                    	<i class="fa fa-home"></i>
                    </div>
                    <p class="weui-tabbar__label">主页</p>
                </a>
                <a href="{:url('Index/goods')}" class="weui-tabbar__item weui-bar__item_on">
                    <div class="weui-tabbar__icon">
                    	<i class="fa fa-list"></i>
                    </div>
                    <p class="weui-tabbar__label">下单</p>
                </a>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript">
    
    query(1);
    function query(cateId){
    	$.ajax({
            url: '/api/v1/goods/homelists',
            type: 'POST',
            dataType: 'json',
            data:{
                draw: 1,
                catid:cateId
            }
        })
        .done(function(json) {
            console.log("success");
            renderData("#listData",json.data);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    }
    // 渲染列表
    function renderData(_elment,_data){
    	$(_elment).empty();
        for(var i= 0; i<_data.length;i++){
        	var yu = '无货';
        	if(_data[i].stock > 0){
        		yu = '还剩余'+ ((_data[i].stock * 100)/(_data[i].stock + _data[i].sales)).toFixed(2) +'%';
        	}
            var _item =
            '<div class="weui-panel weui-goods-item" data-start="'+_data[i].start_time+'" data-end="'+_data[i].end_time+'" data-quantity="'+_data[i].stock+'" data-sales="'+_data[i].sales+'">\
                <div class="weui-panel__hd">\
                    <span class="weui-panel__heading">正在热卖</span>\
                    <span class="count-time">距开始：0小时35分钟37秒</span>\
                </div>\
                <div class="weui-panel__bd">\
                    <div class="weui-media-box weui-media-box_appmsg">\
                        <a class="weui-media-box__hd" href="{:url('Index/goods_detail')}?id='+_data[i].id+'">\
                          <img class="weui-media-box__thumb" src="'+_data[i].pic+'" alt="">\
                        </a>\
                        <div class="weui-media-box__bd">\
                            <h4 class="weui-media-box__title">'+_data[i].goodsname+'</h4>\
                            <b class="weui-wepay-color-lightblue">库存剩余：'+_data[i].stock+'件</b>\
                            <div class="weui-flex weui-media-box__desc">\
                                <div class="weui-flex__item">'+yu+'</div>\
                                <span>已购'+_data[i].sales+'件</span>\
                            </div>\
                            <div class="weui-progress" style="margin-bottom: 5px;">\
                                <div class="weui-progress__bar">\
                                    <div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>\
                                </div>\
                            </div>\
                            <div class="weui-flex">\
                                <div class="weui-flex__item weui-wepay-color-orange">￥'+_data[i].price+'</div>\
                                <a href="{:url('Index/goods_detail')}?id='+_data[i].id+'" class="weui-btn weui-btn_mini weui-btn_primary">马上抢</a>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
            </div>';

            $(_elment).append(_item);
           start();
        }

    }

function start() {
  if($('.weui-goods-item').length > 0) {
    $.each($('.weui-goods-item'), function(key, value) {
      var startTime = Number($(value).data('start'));
      var endTime = Number($(value).data('end'));
      var _nowTime = new Date().valueOf();
      var quantity = Number($(value).data('quantity'));
      var sales = Number($(value).data('sales'));

      var barWidth = Math.floor((1 - sales / (quantity + sales)) * 100);
      if(isNaN(barWidth)) {
        barWidth = 0;
      }
      $(value).find('.weui-progress__bar .js_progress').css('width', barWidth + '%');
      $(value).find('.weui-media-box__desc .weui-flex__item').text("还剩余" + barWidth + '%');
      // 有货的前提下
      if(quantity > 0) {
        if((startTime != "" && startTime != 0) && (endTime != "" && endTime != 0)) {
          // 抢购商品
          setCountDow($(value), startTime * 1000, endTime * 1000, sales);
        } else if(startTime != "" && startTime != 0) {
          // 开始发售
          setCountDow($(value), startTime * 1000, 0, sales);
        } else if(endTime != "" && endTime != 0) {
          // 限时抢购
          setCountDow($(value), 0, endTime * 1000, sales);
        } else {
          // 非抢购商品
          $(value).children('.mask').remove();
          $(value).children('.count-time').remove();
          $(value).find('.weui-btn_primary').text("购买").removeAttr('disabled');
        }
      } else {
        if((startTime != "" && startTime != 0) || (endTime != "" && endTime != 0)) {
          //                  $(value).children('.mask').addClass('active').find('p').html('活动已结束<span>共售出'+sales+'件</span>');
          $(value).children('.mask').addClass('active');
        } else {
          $(value).find('.weui-btn_primary').text("购买");
          $(value).children('.mask').addClass('active').find('p').html('已售完<span>共售出' + sales + '件</span>');
        }
        $(value).children('.tag').text("已售完");
        //              $(value).remove();
      }

    });
  }
}

function setCountDow(aim, startTime, endTime, sales) {
  var txt = '';
  var _nowTime = new Date().valueOf();
  if(_nowTime >= endTime && endTime != 0) {
    // 超过购买时间
    $(aim).find('.weui-btn_primary').attr('disabled', true);
    //      $(aim).children('.mask').addClass('active').find('p').html('活动已结束<span>共售出'+sales+'件</span>');
    $(aim).children('.mask').addClass('active');
    $(aim).children('.count-time').text('活动结束');
    //                  clearInterval(timer)
    return false;
  } else if((_nowTime > startTime && _nowTime < endTime) || (startTime == 0 && _nowTime < endTime)) {
    // 抢购中
    txt = '距结束：';
    $(aim).find('.weui-btn_primary').removeAttr('disabled');
    var timeStr = freshTime(aim, endTime);
    if(timeStr == false || timeStr == undefined) {
      $(aim).children('.count-time').text('活动结束');
      //          $(aim).children('.mask').addClass('active').find('p').html('活动已结束<span>共售出'+sales+'件</span>');
      $(aim).children('.mask').addClass('active');
      $(aim).find('..weui-btn_primary').attr('disabled', true);
    } else {
      $(aim).children('.count-time').text(txt + timeStr);
    }
    var timer1;
    timer1 = setInterval(function() {
      var timeStr = freshTime(aim, endTime);
      if(timeStr == false || timeStr == undefined) {
        $(aim).children('.count-time').text('活动结束');
        //              $(aim).children('.mask').addClass('active').find('p').html('活动已结束<span>共售出'+sales+'件</span>');
        $(aim).children('.mask').addClass('active');
        $(aim).find('.weui-btn_primary').attr('disabled', true);
        clearInterval(timer1);
      } else {
        $(aim).children('.count-time').text(txt + timeStr);
      }
    }, 1000);
  } else if(_nowTime <= startTime) {
    // 倒计时中
    txt = '距开始：';
    var timer2;
    $(aim).find('.weui-btn_primary').attr('disabled', true);
    timer2 = setInterval(function() {
      var timeStr = freshTime(aim, startTime, endTime);
      if(timeStr == false || timeStr == undefined) {
        clearInterval(timer2);
      } else {
        $(aim).children('.count-time').text(txt + timeStr);
      }
    }, 1000);
  } else if(_nowTime > startTime && endTime == 0) {
    $(aim).children('.count-time').text('抢购中');
    $(aim).find('.weui-btn_primary').removeAttr('disabled');
  }

}

function checktime(i) {
  if(i < 10) {
    i = "0" + i;
  } else {
    i = i;
  }
  return i;
}

function freshTime(aim, time, sectime, sales) {
  var endtime = time;
  var nowtime = new Date().valueOf();
  var lefttime = parseInt(endtime - nowtime); //这是毫秒，如果再/1000就是秒  
  if(lefttime > 0) {
    // 获取剩下的日、小时、分钟、秒钟  
    // 一天有多少毫秒，一小时有多少毫秒，一分钟有多少毫秒，一秒钟有多少毫秒  
    var dm = 24 * 60 * 60 * 1000;
    var d = parseInt(lefttime / dm);
    var hm = 60 * 60 * 1000;
    var h = parseInt((lefttime / hm) % 24);
    var mm = 60 * 1000;
    var m = parseInt((lefttime / mm) % 60);
    var s = parseInt((lefttime / 1000) % 60);
    m = checktime(m);
    s = checktime(s);
    var str = "";
    if(d > 0) {
      str = d + "天" + h + "小时" + m + "分钟";
    } else {
      str = h + "小时" + m + "分钟" + s + "秒";
    }
    //                  $(aim).text(txt + str);
    //                  $(aim).children('.count-time').text(txt + str);
    return str;
    //                  document.getElementById(aim).innerHTML = str;
  } else if(lefttime <= 0) {
    if(sectime !== undefined) {
      setCountDow(aim, time, sectime, sales);
    } else {
      //                      $(aim).children('.count-time').text('活动结束');
      //                      clearInterval(timer);
      return false;
    }
  }
}
function show(cateId){
    query(cateId)
}
</script>
{/block}